<template>
    <div class="sifter-box flex-row-center" v-if="isEdit==0">
        <el-form :inline="true" :model="sifterForm" class="demo-form-inline">
            <el-form-item label="筛选：">
                <el-input v-model="sifterForm.key" placeholder="输入资讯关键字" @input="proxy.$utils.debounce(updalist,sifterForm)"></el-input>
            </el-form-item>
        </el-form>
        <div>
        </div>
    </div>

    <div class="listDiv" v-if="isEdit==0">
        <el-table :data="list" stripe style="width: 100%">
            <el-table-column prop="name" label="产品名称"> </el-table-column>
            <el-table-column prop="cover" label="产品主图" width="100">
                <template #default="props">
                    <el-image style="width: 40px; height: 40px" fit="contain" :src="fileurl+ '/banking/'+ props.row.cover" @click="showDialog('dialogImage',fileurl+ '/banking/'+  props.row.cover)">
                        <template #error>
                            <div class="image-slot">
                                <el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"/>
                            </div>
                        </template>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="price" label="价格/元" width="100"> </el-table-column>
            <el-table-column prop="intime" label="发布时间" width="180"> </el-table-column>
            <el-table-column prop="" label="操作" width="150">
                <template #default="props">
                    <span v-if="props.row.isme!=0" class="pointer mr10 base-color" @click="editData(props.row)">查看详情</span>
                    <span class="pointer mr10 base-color" @click="chart(props.row)">咨询</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="pd20 w100 flex-row-center ju-flex-end">
            <el-pagination
                v-model:currentPage="sifterForm.currentpage"
                v-model:page-size="sifterForm.pagesize"
                :page-sizes="[10, 20, 50, 100]" :total="total"
                @size-change="()=>{updalist()}"
                @current-change="()=>{updalist()}"
                layout="total, sizes, prev, pager, next, jumper"  background/>
        </div>
    </div>

    <div class="edit-box" v-if="isEdit!=0">
        <div class="title-box flex-row-center">
            <span class="pointer return flex-row-center mr10" @click="re_turn"><el-icon><back /></el-icon></span>
            <span>产品详情</span>
        </div>
        <div class="form-box">
            <div class="head-title flex-row">
                <el-image style="width: 200px; height: 200px" fit="cover" :src="fileurl+ '/banking/'+ detail.cover">
                        <template #error>
                            <div class="image-slot">
                                <el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"/>
                            </div>
                        </template>
                    </el-image>
                <div class="flex-column ml10 head-title">
                    <span class="title mb10">{{detail.name||''}}</span>
                    <span class="base-size"><span class="base-gray-size">价格：</span>{{detail.price}}元</span>
                </div>
            </div>
            <div class="flex-row-center ju-flex-end mt10 mb10 base-gray-size">
                <span class="base-size mr10 flex-row-center"><el-icon class="mr5"><timer /></el-icon>{{detail.intime}}</span>
                <span class="base-size mr10 flex-row-center"><el-icon class="mr5"><user /></el-icon>{{detail.man}}</span>
                <span class="base-size mr10 flex-row-center"><el-icon class="mr5"><phone /></el-icon>{{detail.mobile}}</span>
            </div>
            <div class="line mb20"></div>
            <div v-html="detail.msg"></div>
        </div>
    </div>

</template>

<script setup>
    import { reactive,ref,getCurrentInstance,toRefs,toRaw } from 'vue'
    import { Back,Edit,Delete,Timer,Phone,User } from '@element-plus/icons-vue'
    import Editer from '../../components/editer.vue'
    let { proxy } = getCurrentInstance()
    let obj = reactive({
        fileurl: proxy.$setting.globalUrl.fileurl,
        isEdit: 0,
        total: 0,
        list:[],
        sifterForm: {
            key: '',
            currentpage: 1,
            pagesize: 10
        },
        detail: {}
    });

    const updalist = (form)=>{
        let param = {
            ...obj.sifterForm,
            ...form
        }
        proxy.$ajax({url: 'banking/list',data: param,bfLoading: true}).then(d => {
            console.log(d);
            if(d.success){
                total.value = d.msg.count||0
                list.value = d.msg.list;
            }else{}
        }).catch(e => {
            console.log(e)
            if(e == "登录已过期，请重新登录"){
                proxy.routerPushMixin('/')
            }
        })
    }
    updalist();

    const re_turn = ()=>{
        isEdit.value = 0;
    }

    const editData = (item)=>{
        console.log(item);
        if(item){
            proxy.$ajax({url: 'banking/get',data:{banking_id:item.banking_id},bfLoading: true}).then(d => {
                console.log(d);
                if(d.success){
                    detail.value = d.msg
                    isEdit.value = 1
                }else{}
            }).catch(e => {
                console.log(e)
                if(e == "登录已过期，请重新登录"){
                    proxy.routerPushMixin('/')
                }
            })
        }
    }
    const chart = (row)=>{
        proxy.routerPushNewMixin('/chartmechanismdetail',{
            id: row.banking_id,
            name: row.name,
            mechanism_id: row.mechanism_id,
            mechanism_name: row.mechanism_name,
            type: 'banking'

        })
    }
    
    let { list, sifterForm, isEdit, total, fileurl, detail } = toRefs(obj)
</script>

<style lang="scss" scoped>
</style>